---
title: Render Page Rectangle
description: Learn how to use the renderPageRect method to create an image of a specific area of a PDF page.
searchable: true
---

# renderPageRect

Renders a specific rectangular portion of a PDF page into an image.

## Signature

```typescript
renderPageRect(
  doc: PdfDocumentObject,
  page: PdfPageObject,
  rect: Rect,
  options?: PdfRenderPageOptions
): PdfTask<T>;
````

## Description

This method is useful for features like "zoom-in" rendering or highlighting a specific area without rendering the entire page. It crops the output to the specified rectangle, which can be significantly more efficient than rendering the full page and cropping it manually.

The generic type `T` will be a `Blob` in browser environments and a `Buffer` in Node.js.

## Parameters

| Name | Type | Description |
| :--- | :--- | :--- |
| **`doc`** | `PdfDocumentObject` | The handle of the document to render from. |
| **`page`** | `PdfPageObject` | The specific page object where the rectangle is located. |
| **`rect`** | `Rect` | The rectangular area on the page to render, in page coordinates. |
| **`options`** | `PdfRenderPageOptions` | (Optional) An object to customize rendering (scaling, rotation, etc.). |

### `Rect` Interface

The `Rect` interface can be imported from `@embedpdf/models`.

```typescript
import { Rect } from '@embedpdf/models';

export interface Rect {
  origin: { x: number; y: number };
  size: { width: number; height: number };
}
```

### `PdfRenderPageOptions` Details

| Option | Type | Description |
| :--- | :--- | :--- |
| **`scaleFactor`** | `number` | The render scaling factor (zoom level). **Default**: `1.0`. |
| **`rotation`** | `Rotation` | The rotation to apply in degrees (`0`, `90`, `180`, `270`). **Default**: `Rotation.Degree0`. |
| **`dpr`** | `number` | The Device Pixel Ratio, used for rendering crisp images on high-resolution screens. **Default**: `1`. |
| **`imageType`** | `'image/webp' \| 'image/png' \| 'image/jpeg'` | The output image format. **Default**: `'image/webp'`. |
| **`withAnnotations`**| `boolean` | Set to `true` to include annotations in the rendered image. **Default**: `false`. |


## Returns

`PdfTask<T>`

A **`Task`** that resolves with the rendered image of the specified rectangle (`Blob` or `Buffer`).

The `Task` will be rejected if the document or page handle is invalid.

See [Concepts: Tasks](../tasks.md) for more on how to handle asynchronous operations.

## Example

```typescript
// Assuming 'engine' and an open 'document' object are available

async function renderZoomedArea(doc, page) {
  try {
    // Define a rectangle to capture the top-left quadrant of the page
    const cropArea = {
      origin: { x: 0, y: 0 },
      size: { 
        width: page.size.width / 2,
        height: page.size.height / 2
      },
    };
    
    const imageBlob = await engine.renderPageRect(doc, page, cropArea).toPromise();

    // Display the cropped image
    const imageUrl = URL.createObjectURL(imageBlob);
    document.getElementById('my-cropped-image').src = imageUrl;

  } catch (error) {
    console.error('Failed to render page rect:', error);
  }
}
```

## See Also

  - [renderPage](render-page.md)
